// 系统整体布局的样式
#app{
    $commonBorder:1px solid #f6f6f6;
    .layout-container{
        width:100%;
        height:100%;
        overflow: hidden;
    }

    .layout-top{
        width:100%;
        height:60px;
        line-height: 60px;
        background:#fff;
        border-bottom:$commonBorder;
        position: relative;

        .layout-top-left,.layout-top-right{
            width: auto;
            height: 100%;
            display: flex;
        }
        .layout-top-left{
            float: left;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding-left: 10px;
        }
        .layout-top-right{
            float: right;
            justify-content: flex-end;
            padding-right: 10px;
        }
        .name{
            font-size: 20px;
            color:#515a6e;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .logo{
            display:inline-block;
            height: 30px;
            margin:0 10px;
        }

    }

    .layout-bottom{
        width:100%;
        height:calc(100% - 60px);
    }
    .layout-left-nav{
        width:220px;
        height: 100%;
        float: left;
        background: #fff;
        border-right:$commonBorder;
        position: relative;
        z-index: 10;
        transition:width .26s ease;
        box-shadow:0px 0px 3px 0px rgba(0,21,41,.06);
    }
    .layout-left-nav-shrink{
        width:55px;
    }

    .layout-right-cont{
        width:calc(100% - 220px);
        height: 100%;
        float: right;
        background: #fff;
        transition:width .26s ease;

        .bread-tags-link{
            width:100%;
            height: 50px;
            padding:5px 10px;
            padding-left: 50px;
            padding-right: 70px;
            border-bottom: $commonBorder;
            position: relative;
            box-shadow:0 1px 3px 0 rgba(0,21,41,.08);
        }

        .main-container{
            width:100%;
            height: calc(100% - 50px);
            background:#f5f8f9;
            overflow: hidden;

            .main-content-container{
                padding:15px;
            }
        }
    }
    .layout-right-cont-expand{
        width: calc(100% - 55px);

    }


    .el-breadcrumb{
        height: 100%;
        display: flex;
        align-items: center;
    }


}
